<template>
  <div class="project-page">
    <!-- 顶部标题 -->
    <Header />
    <div class="back-page">
      <!-- 页面内容 -->
      <div class="content">
        <!-- 标题 -->
        <div class="breadcrumb">
          <el-link type="primary" @click="navTo('/index')" icon="DArrowLeft">返回</el-link>
          <span>首页 / 我的控制台 / 企业信息设置</span>
        </div>
        <div style="display: flex; justify-content: space-between">
          <div style="display: flex; align-items: center">
            <div style="width: 6px; background: rgb(24, 144, 255); height: 24px; margin-right: 5px"></div>
            <h2>企业信息设置</h2>
          </div>
          <el-button type="primary" @click="navTo(`/editCompanyInfo?id=${id}`)">修改</el-button>
        </div>

        <!-- 优化后的表格 -->
        <table class="info-table">
          <tr class="table-header">
            <td class="label" rowspan="1">单位名称</td>
            <td class="data" colspan="3">{{ companyInfo.enterprise }}</td>
          </tr>
          <tr>
            <td class="label">统一社会信用代码</td>
            <td class="data">{{ companyInfo.creditCode }}</td>
            <td class="label">供应商编码</td>
            <td class="data">{{ companyInfo.code }}</td>
          </tr>
          <tr>
            <td class="label">经营资质证书类型</td>
            <td class="data">{{ getDictValue(supplierCertOptions, companyInfo.certType) }}</td>
            <td class="label">单位类型</td>
            <td class="data">{{ getDictValue(unitTypeOptions, companyInfo.unitProperty) }}</td>
          </tr>
          <tr>
            <td class="label">是否独立法人</td>
            <td class="data">{{ companyInfo.independentLegalEntity == "1" ? "是" : "否" }}</td>
            <td class="label">法定代表人/负责人</td>
            <td class="data">{{ companyInfo.legalRepresentative }}</td>
          </tr>
          <tr>
            <td class="label">证书有效期</td>
            <td class="data">{{ companyInfo.isLongTime == "1" ? "长期" : companyInfo.periodOfValidity }}</td>
            <td class="label">住所</td>
            <td class="data">{{ companyInfo.address }}</td>
          </tr>
          <tr>
            <td class="label">行业类别</td>
            <td class="data">{{ getDictCheckboxLabels(supplierIndustryOptions, companyInfo.industryType) }}</td>
            <td class="label">单位类型</td>
            <td class="data">{{ getDictValue(unitTypeOptions, companyInfo.unitProperty) }}</td>
          </tr>
          <tr>
            <td class="label">单位性质</td>
            <td class="data">{{ getDictValue(unitPropertyOptions, companyInfo.unitProperty) }}</td>
            <td class="label">公司电子邮箱</td>
            <td class="data">{{ companyInfo.email }}</td>
          </tr>
          <tr>
            <td class="label">供应商主要联系人</td>
            <td class="data">{{ companyInfo.name }}</td>
            <td class="label">供应商主要联系人电话</td>
            <td class="data">{{ companyInfo.phone }}</td>
          </tr>
        </table>
      </div>
    </div>
  </div>
</template>

<script setup>
import { computed, onMounted, ref } from "vue";
import { useRouter, useRoute } from "vue-router";
import { vendorInfo } from "@/api/vendor";
import { getDictValue, getDictCheckboxLabels } from "@/utils/common";
import { useDataStore } from "@/store/index.js"; // 引入 Pinia Store
import Header from "../../components/Header.vue";

const dataStore = useDataStore(); // 使用 Pinia Store
const router = useRouter();
const route = useRoute();
const navTo = (path) => {
  router.push(path);
};

const id = computed(() => route.query.id);
// 从 Store 中获取字典数据
const supplierCertOptions = computed(() => dataStore.supplier_cert);
const supplierIndustryOptions = computed(() => dataStore.supplier_industry);
const unitTypeOptions = computed(() => dataStore.unit_type);
const unitPropertyOptions = computed(() => dataStore.unit_property);
const companyInfo = ref({});

//获取供应商基本信息
const getCompanyInfo = async () => {
  const res = await vendorInfo(id.value);
  if (res.code == 200) {
    companyInfo.value = res.data;
  }
};

onMounted(() => {
  getCompanyInfo();
});
</script>

<style scoped>
.back-page {
  min-height: calc(100vh - 56px);
  background: url("../../assets/f87147698f07020d4fea348f49da0166.png") no-repeat center center;
  background-size: cover;
}
.project-page {
  font-family: Arial, sans-serif;
}

.header {
  display: flex;
  align-items: center;
  padding: 16px;
  border-bottom: 1px solid #ddd;
  background-color: #f5f5f5;
}

.header .logo {
  display: flex;
  align-items: center;
}

.header .logo span {
  margin-left: 16px;
  font-size: 18px;
  font-weight: bold;
}

.content {
  padding: 20px;
  width: 80%;
  margin: 0 auto;
}

.breadcrumb {
  color: #888;
  font-size: 14px;
  margin-bottom: 16px;
  display: flex;
  align-items: center;
}

.breadcrumb span {
  margin-left: 20px;
}

h2 {
  font-size: 20px;
  color: #333;
  margin-bottom: 20px;
}

.info-table {
  width: 100%;
  border-collapse: collapse;
  text-align: center;
  margin-top: 20px;
  background-color: #fff;
  border-radius: 8px;
  overflow: hidden;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
}

.info-table td {
  padding: 10px 15px;
  border: 1px solid #ddd;
}

.info-table .table-header {
  background-color: #f0f4f7;
  font-weight: bold;
  color: #333;
}

.info-table .label {
  background-color: #f9f9f9;
  padding: 12px;
  text-align: center;
}

.info-table .data {
  padding: 10px;
  text-align: center;
  width: 30%;
}

.info-table tr:hover {
  background-color: #f5f5f5;
  transition: background-color 0.3s;
}
td {
  text-align: center;
  padding: 10px;
}
</style>
